<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import * as echarts from "echarts";

const dataList = ref([]);

// 创建一个响应式引用来保存DOM元素
const chartDom = ref();

// 创建一个对象，保存Echarts实例
let chartInstance = null;

async function initData(){
  const apiRes = await axios.get('http://localhost:8080/newEnergyChargeWeekChargeTime');
  dataList.value = apiRes.data;
  initEcharts();
}

function initEcharts(){
  const xList = dataList.value.map(v => v.week);
  const yList = dataList.value.map(v => v.chargeTime);
  chartInstance = echarts.init(chartDom.value);
  const option = {
    title: {
      text: '充电总时间'
    },
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      data: xList
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: yList
      }
    ]
  };
  chartInstance.setOption(option);
}

onMounted(() => {
  initData();
})
</script>

<template>
  <div ref="chartDom" style="width: 800px;height: 500px"></div>
</template>

<style scoped>

</style>
